<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.container{
				border: 1px solid #00ffff;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: aquamarine;
				padding: 10px;
				margin: 10px;
			}
			button{
				margin: 10px;
				padding: 20px;
			}
		</style>
		<!-- 元素遍历	用于DOM树中遍历元素 【理解：元素嵌套，父子级】
		 children()		功能：获取匹配元素集合中每个元素的子元素
		 parent()		功能：获取匹配元素集合中每个元素的父元素
		 
		 siblings()		功能：获取匹配元素集合中每个元素的兄弟元素
		 
		 next()			功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()			功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()			功能：遍历匹配元素的集合--遍历所有子元素
		                    语法糖：each（function（index，element）{
								$(element).text(``${index})
								注意：打印遍历的值，不可以使用单双引号+拼接
								功能：获取到的元素，遍历元素内容
							}）;
							index   下标    element    元素    形参
		 -->
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="childrenBtn">获取子元素</button>
		<button id="parentBtn">获取父元素</button>
		<button id="siblingsBtn">获取所有兄弟元素</button>
		<button id="nextBtn">获取下一个兄弟元素</button>
		<button id="prevBtn">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		
		<script>
			// 1.点击 获取子元素 按钮 实现.container下所有子元素添加背景色
			$("#childrenBtn").click(function(){
				// 通过父找子
				$(".container").children().css("background-color","#ffaaff");
			});
			// 2.点击 获取父元素 按钮 实现.container 添加背景色
			$("#parentBtn").click(function(){
				// 通过子找父
				$(".container").parent().css("background-color","#55ff7f");
			});
			// 3.点击 获取兄弟元素 按钮 实现除了自己（box4）的字体颜色不变其它都变色
			$("#siblingsBtn").click(function(){
				// 通过子找父
				$("#box4").siblings().css("color","#55aaff");
			});
			// 4.点击 获取下一个兄弟 按钮 实现（box4）下一个兄弟 添加背景色
			$("#nextBtn").click(function(){
				// 通过子找父
				$("#box4").next().css("background-color","#ffff7f");
			});
		// 5.点击 获取上一个兄弟元素 按钮 实现#box6 上一个兄弟，添加效果 圆、背景图、背景色、盒子阴影
					$("#prevBtn").click(function(){
						// 通过子找父
						$("#box6").prev().css({
						"background-color":"#5500ff",
						"border-radius":"50%",
						"box-shadow":"10px 10px 20px #55ffff",
						"width":"350px",
						"height":"350px",
						"background-image":"url(../img/A40F30574507C23E803F27F5EEA17E6B.gif)"
						});
					});
					//6.点击  遍历元素    按钮    实现每个盒子上    这是第几个盒子
					$("#loop").click(function(){
						//通过  .box   抓到6个元素【一组集合】
						$(".box").each(function(i,e){
                                  //每个盒子加文字：这是第几个盒子
								  $(e).text(`这是第${i}盒子`);
						});
					});
				</script>
			</body>
		</html>